<template>
	<view class="content" :style="{paddingTop:`${safeTop}px`,height:`${barHeight}rpx`}">
		<image src="../static/home.png" class="home-icon" mode="heightFix" @click="back"></image>
		<view class="title">
			垃圾分类鉴别
		</view>
	</view>
</template>

<script>
	export default {
		name: "StatusBar",
		data() {
			return {
				safeTop: 20,
				barHeight: 40
			};
		},
		onReady() {


		},
		methods: {
			back() {
				// uni.navigateBack()
				uni.navigateTo({
					url: "/pages/index/index"
				})
			}
		},
		mounted() {
			let res = uni.getSystemInfoSync()
			// console.log('on ready', res)
			// 手机屏幕的高度
			const screenHeight = res.screenHeight
			// 安全区高度
			const safeHeight = res.safeArea.height
			// 状态栏的高度
			const safeTop = res.safeArea.top
			this.safeTop = safeTop;
			this.barHeight = screenHeight - safeHeight - safeTop;
			this.barHeight = this.barHeight <= 40 ? 80 : this.barHeight;
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// height: 80rpx;
		background-color: #eee;
		position: relative;

		.home-icon {
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			left: 50rpx;
			bottom: 15rpx;
		}

		.title {
			width: 300rpx;
			height: 48rpx;
			text-align: center;
			position: absolute;
			line-height: 48rpx;
			left: 50%;
			margin-left: -150rpx;
			bottom: 15rpx;
			font-size: 34rpx;
			font-weight: 400;
		}
	}
</style>